<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据增加、删除</title>
    <link rel="stylesheet" href='./css/index.css'>
</head>

<body>
    <div class="box">
        <button class="add">添加用户</button>
        <div class="table">
            <table border="1px" cellspacing='0' class="tb">
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>删除</th>
                </tr>
            </table>
        </div>
        <div class="wrapper">
            <h1>新增用户表单
                <button class="s-del">X</button>
            </h1>
            <div class="user">
                <div class="con">
                    <span>姓名</span>
                    <input type="text" class="username">
                </div>
                <div class="con">
                    <span>年龄</span>
                    <input type="text" class="age">
                </div>
                <div class="con">
                    <span>邮箱</span>
                    <input type="text" class="mail">
                </div>
                <button class="preserve">保存</button>
            </div>
        </div>


    </div>
    <script>
        let add = document.querySelector('.add');
        let wrapper = document.querySelector('.wrapper')
        add.addEventListener('click', function() {
            wrapper.style.display = 'block'
        })
        let sdel = document.querySelector('.s-del');
        sdel.addEventListener('click', function() {
                wrapper.style.display = 'none'
            })
            //获取所有的表单
        let username = document.querySelector('.username');
        let age = document.querySelector('.age');
        let mail = document.querySelector('.mail');
        let btn = document.querySelector('.preserve');
        //获取表格table
        let tab = document.querySelector('.tb');
        btn.addEventListener('click', function() {
            let tr = document.createElement('tr')
                // console.log(tr);
            if (username.value === '' || age.value === '' || mail === '') {
                alert('输入框不能为空，请重新输入')
                return
            }
            tr.innerHTML = `
            <tr>
            <td>${username.value}</td>
            <td>${age.value}</td>
            <td>${mail.value}</td>
            <td class = 'delete'></td>
             </tr>
            `
            let del = tr.children[3];
            // del.style.background = `url(./images/1.png) no-repeat center center`
            console.log(del);
            tab.appendChild(tr);
            del.addEventListener('click', function() {
                del.parentNode.remove()
                wrapper.style.display = 'none'
            })
            username.value = '';
            age.value = ''
            mail.value = ''
        })
    </script>
</body>

</html>